<template>
  <div class="no-more-container">
    <img src="@/assets/noData.webp" :style="{ width: size + 'px' }" alt="no more fans" />
    <div class="no-more-text">
      {{ title }}
    </div>
  </div>
</template>

<script setup lang="ts">
  const props = defineProps({
    title: { type: String, default: 'No Data...' },
    size: { type: Number, default: 64 },
  });
</script>

<style scoped lang="scss">
  .no-more-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 32px 0; // 较大内边距，和内容保持距离
  }

  .no-more-text {
    max-width: 500px;
    padding: 12px 24px;
    color: #7a7a7a;
    font-size: 16px;

    font-weight: 500;
    text-align: center;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .lline {
    width: 60px;
    height: 1px;
    border-radius: 5px;
    background-color: #e1e2e3;
  }
</style>
